<div id="current-family">
    <div class="col-md-6">
        <div class="col-md-5">
            <img src="../../../../../public/img/org/logo_havard.png" alt="So beautiful image" width="100px"/>
        </div>
        <div class="col-md-7">
            <label class="user_family_relative_name">Osama Bin Laden</label><br/>
            <label class="user_family_label"><strong>Birthday:</strong> 11/9/2000</label><br/>
            <label class="user_family_label"><strong>Relation:</strong> Father</label><br/>
            <label class="user_family_label"><strong>Job:</strong> Gangster</label><br/>
            <label class="user_family_label"><strong>National:</strong> Iraq</label>
        </div>
    </div>
    <div class="col-md-6">
        <div class="col-md-5">
            <img src="../../../../../public/img/org/logo_illinos_state.png" alt="So beautiful image" width="100px"/>
        </div>
        <div class="col-md-7">
            <label class="user_family_relative_name">Barrack Omaba</label><br/>
            <label class="user_family_label"><strong>Birthday:</strong> 4/7/2013</label><br/>
            <label class="user_family_label"><strong>Relation:</strong> Grand Father</label><br/>
            <label class="user_family_label"><strong>Job:</strong> President</label><br/>
            <label class="user_family_label"><strong>National:</strong> Afghanistan</label>
        </div>
    </div>
</div>
<div id='widget-family'>
    <ul>
        <li>
            <label>
                Name
                <abbr title="Required">*</abbr>
            </label>

            <div>
                <input type="text" maxlength="100" size="32" required>
            </div>
        </li>
        <li>
            <label>
                Birthday
            </label>

            <div>
                <form class="form-horizontal">
                    <fieldset>
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-prepend input-group">
                                    <span class="add-on input-group-addon">
                                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                    </span>
                                    <input type="text" style="width: 200px" name="birthday" id="birthday"
                                           class="form-control" value="03/18/2013"/>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </li>
        <li>
            <label>
                Relationship
            </label>

            <div>
                <select>
                    <option value selected="selected">Choose Relationship..</option>
                    <option value="1">Sister</option>
                    <option value="2">Brother</option>
                    <option value="3">Mother</option>
                    <option value="4">Father</option>
                    <option value="5">Daughter</option>
                    <option value="6">Son</option>
                    <option value="7">Aunt</option>
                    <option value="8">Uncle</option>
                    <option value="9">Niece</option>
                    <option value="10">Nephew</option>
                    <option value="11">Cousin (male)</option>
                    <option value="12">Cousin (female)</option>
                    <option value="13">Grandmother</option>
                    <option value="14">Grandfather</option>
                    <option value="15">Granddaughter</option>
                    <option value="16">Grandson</option>
                    <option value="17">Stepsister</option>
                    <option value="18">Stepbrother</option>
                    <option value="19">Stepmother</option>
                    <option value="20">Stepfather</option>
                </select>
            </div>
        </li>
        <li>
            <label>
                Job
            </label>

            <div>
                <input type="text" maxlength="100" size="32"/>
            </div>
        </li>
        <li>
            <label>
                National
            </label>

            <div>
                <input type="text" maxlength="100" size="32"/>
            </div>
        </li>
        <li>
            <button class="glyphicon glyphicon-plus btn-info" style="margin: 5px 5px 5px 0px"></button>
            Add your relatives
        </li>
        <li>
            <button class="btn-primary">Save</button>
            <button class="btn-default">Cancel</button>
        </li>
    </ul>
</div>

<script src="<?php echo $this->basePath() ?>/js/moment.js"></script>
<script src="<?php echo $this->basePath() ?>/js/daterangepicker.js"></script>
<script src="<?php echo $this->basePath() ?>/js/widget/family.js"></script>